<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>友情链接</title>
		<link rel="stylesheet" href="../assets/lib/layui/css/layui.css" />
		<link rel="stylesheet" href="../assets/fonts/iconfont.css" />
		<link rel="stylesheet" href="../assets/css/link.css" />
	</head>
	<body>
		<div class="layui-card">
			<div class="layui-card-header">
				友情链接
				<a
					href="http://www.layui.com"
					class="layui-btn layui-btn layui-btn-normal addLink"
					>添加链接</a
				>
			</div>
			<div class="layui-card-body tbody">
				<table class="layui-table">
					<colgroup>
						<col width="50" />
						<col />
						<col />
						<col />
						<col />
						<col />
					</colgroup>
					<thead>
						<tr>
							<th>ID</th>
							<th>链接图标</th>
							<th>链接名称</th>
							<th>链接地址</th>
							<th>链接描述</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody></tbody>
			</div>
		</div>

		<!-- 动态生成友情链接 -->
		<script type="text/html" id="linkList">
			{{each data v}}
			<tr>
				<td>{{v.id}}</td>
				<td>
					<div style="background-color: #333">
					<img src="http://localhost:8888/uploads/{{v.linkicon}}" alt="">
					</div>
				</td>
				<td>{{v.linkname}}</td>
				<td>{{v.linkurl}}</td>
				<td>{{v.linkdesc}}</td>
				<td>
					<button
						type="button"
						class="layui-btn layui-btn layui-btn-xs edit_btn"
						data-id="{{v.id}}"
					>
						编辑
					</button>
					<button
						type="button"
						class="layui-btn layui-btn layui-btn-xs layui-btn layui-btn-danger del_btn"
						data-id="{{v.id}}"
					>
						删除
					</button>
				</td>
			</tr>
			{{/each}}
		</script>
		<!-- 添加弹出层 -->
		<script type="text/html" id="linkMsg">
			<form class="layui-form" id="addLink" lay-filter="addForm">
				<div class="layui-form-item">
					<label class="layui-form-label">链接名称</label>
					<div class="layui-input-block">
						<input
							type="text"
							name="linkname"
							required
							lay-verify="required"
							placeholder="请输入链接名称"
							autocomplete="off"
							class="layui-input"
							value=""
						/>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">链接地址</label>
					<div class="layui-input-block">
						<input
							type="text"
							name="linkurl"
							placeholder="请输入链接地址"
							autocomplete="off"
							class="layui-input"
							value=""
						/>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">链接描述</label>
					<div class="layui-input-block">
						<input
							type="text"
							name="linkdesc"
							placeholder="请输入链接描述"
							autocomplete="off"
							class="layui-input"
							value=""
						/>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<input
							name=""
							type="file"
							accept="image/*"
							required
							lay-verify="required"
							style="display: none"
							class="add_pic"
							value=""
						/>
						<button
							type="button"
							class="layui-btn layui-btn layui-btn-sm"
							id="addpic"
						>
							<i class="layui-icon layui-icon-upload"></i>
							上传图片
							<img src="" alt="" class="small_pic">
						</button>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block ">
						<button
							class="layui-btn commitData"
							lay-submit
							lay-filter="formDemo"
						>
							提交
						</button>
						<button
							type="reset"
							class="layui-btn layui-btn-primary"
						>
							重置
						</button>
					</div>
				</div>
			</form>	
		</script>
		<!-- 编辑弹出层 -->
		<script type="text/html" id="editMsg">
			<form class="layui-form" id="editForm" lay-filter="editForm">
				<div class="layui-form-item">
					<label class="layui-form-label">链接名称</label>
					<div class="layui-input-block">
						<input
							type="text"
							name="linkname"
							required
							lay-verify="required"
							placeholder="请输入链接名称"
							autocomplete="off"
							class="layui-input"
							value=""
						/>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">链接地址</label>
					<div class="layui-input-block">
						<input
							type="text"
							name="linkurl"
							placeholder="请输入链接地址"
							autocomplete="off"
							class="layui-input"
							value=""
						/>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">链接描述</label>
					<div class="layui-input-block">
						<input
							type="text"
							name="linkdesc"
							placeholder="请输入链接描述"
							autocomplete="off"
							class="layui-input"
							value=""
						/>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<input
							name=""
							type="file"
							accept="image/*"
							required
							lay-verify="required"
							style="display: none"
							class="edit_pic"
							value=""
						/>
						<button
							type="button"
							class="layui-btn layui-btn layui-btn-sm"
							id="edit_pic"
						>
							<i class="layui-icon layui-icon-upload"></i>
							上传图片
							<img src="" alt="" class="small_pic_edit">
						</button>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block ">
						<button
							class="layui-btn commitData"
							lay-submit
							lay-filter="formDemo"
						>
							提交
						</button>
						<button
							type="reset"
							class="layui-btn layui-btn-primary"
						>
							重置
						</button>
					</div>
				</div>
			</form>	
		</script>
		<script src="../assets/lib/layui/layui.all.js"></script>
		<script src="../assets/lib/jquery.js"></script>
		<script src="../assets/js/common.js"></script>
		<script src="../assets/lib/template-web.js"></script>
		<script src="../assets/js/link/link.js"></script>
	</body>
</html>
